.artist {
  background-color: #2c2b40;

  overflow: hidden;
  .top {
    height: 5.066667rem;
    margin: 0.8rem 0.533333rem;
    background-color: #2c2b40;
    position: relative;
    .content-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        display: flex;
        align-items: center;
        .img {
          height: 2rem;
          width: 2rem;
          overflow: hidden;
          border-radius: 50%;
          img {
            height: 2rem;
            width: 2rem;
          }
        }
        .name {
          margin-left: 0.266667rem;
          span {
            color: #ffffff;
            font-size: 20px;
          }
        }
      }

      .right {
        color: #ffffff;

        width: 2.133333rem;
        height: 0.96rem;
        line-height: 0.96rem;
        text-align: center;
        border-radius: 0.48rem;
        background-color: #5a5a67;

        i {
          font-size: 0.373333rem;
          font-weight: 100;
        }

        span {
          margin-left: 0.08rem;
          font-size: 0.373333rem;
        }
      }
    }

    .hint {
      position: absolute;
      top: 80px;
      right: 5px;
      background-color: #000;
      height: 0.88rem;
      line-height: 0.88rem;
      text-align: center;
      border-radius: 5px;
      padding: 0 5px;

      span {
        color: #ccc;
      }
    }
    .triangle {
      position: absolute;
      top: 1.866667rem;
      right: 0.666667rem;
      width: 0px; /*设置宽高为0，所以div的内容为空，从才能形成三角形尖角*/
      height: 0px;
      border-bottom: 0.266667rem solid #000;
      border-left: 0.266667rem solid transparent; /*transparent 表示透明*/
      border-right: 0.266667rem solid transparent;
    }
  }
  .main {
    border-radius: 20px;
    position: absolute;
    top: 180px;
    left: 0;
    width: 100%;

    background: url()
      no-repeat;
    background-color: #fff;
    .project_wrap {
      padding: 0.426667rem;
      .title {
        font-size: 0.586667rem;
        font-weight: 700;
        line-height: 0.8rem;
        padding: 0.533333rem 0 0.4rem;
        text-align: left;
      }
      .serch-item {
        margin-top: 0.48rem;
        background-color: #fff;
        display: flex;

        .item-img {
          img {
            width: 2.666667rem;
            height: 3.6rem;
          }
        }

        .item-content {
          margin-left: 0.266667rem;

          .title-left {
            font-size: 0.426667rem;
          color: #000;
          font-weight: 700;
          }

          .date {
            margin-top: 10px;
            color: #8c8c8c;
          }

          .place {
            margin-top: 0.266667rem;
            color: #8c8c8c;
          }

          .price {
            margin-top: 60px;
           

            .state {
              
              span {
                color: #000000;
                font-weight: 500;
              }

              .state-left {
              
                color: #fa6569;
              }
            }
          }
        }
      }
    }

    .video {
      background: url()
        no-repeat;
      background-color: #fff;
      overflow: hidden;
      .section_title {
        font-size: 0.586667rem;
        font-weight: 700;
        padding: 0.426667rem;
        text-align: left;
      }

      .video-items {
        padding: 0.426667rem;

        .list {
          .item {
            .title {
              font-size: 0.453333rem;
              font-weight: 700;
              color: #111;
              line-height: 0.64rem;
              text-align: left;
              text-overflow: -o-ellipsis-lastline;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              line-clamp: 2;
              -webkit-box-orient: vertical;
            }

            video {
              margin: 0.426667rem auto 0.453333rem;
              position: relative;
              height: auto;
              width: 100%;
              overflow: hidden;
              border-radius: 0.16rem;
          }
            

            .user {
              display: flex;
              justify-content: flex-start;
              align-items: center;
              .userImg {
                
                height: 0.586667rem;
                width: 0.586667rem;
                border-radius: 50%;
                overflow: hidden;
                img {
                  height: 0.586667rem;
                  width: 0.586667rem;
                }
              }

              .username {
                margin-left: 0.133333rem;                span {
                  font-size: 0.346667rem;
                }
                
              }
            }
          }
        }
      }
    }
  }
}
